<template>
  <div>
    <el-dialog title="轮播图" :visible.sync="addUserDia" width="60%" center>
      <div class="home">
        <el-autocomplete
          class="inputs"
          popper-class="my-autocomplete"
          v-model="state"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        >
          <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"></i>
          <template slot-scope="{ item }">
            <div class="name">{{ item.inviteTitle }}</div>
            <span class="addr">{{ item.inviteCode }}</span>
          </template>
        </el-autocomplete>
        <div class="zj">
          <el-upload
            ref="upload"
            action="http://127.0.0.1:9999/invitation/imgUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :limit="1"
            :on-success="handleIconSuccess"
            :on-change="handPictureChange"
            :class="{hide:hideUpload}"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
        <div class="footer">
          <el-button type="warning" @click="okbtn">确定</el-button>
          <el-button type="danger" @click="nobtn">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addShop, searchInvite } from "@/api/shop";
import { addLunbotu } from "@/api/lunbotu";
export default {
  name: "addShop",
  data() {
    return {
      hideUpload: false,
      num: 1,
      addUserDia: false,
      value: "",
      restaurants: [],
      state: "",
      imgaUrls: "",
      dialogImageUrl: "",
      dialogVisible: false
    };
  },

  methods: {
    okbtn() {
      this.$refs.upload.clearFiles();
      this.getData();
    },
    nobtn() {
      this.addUserDia = false;
    },
    getData() {
      let obj = {
        imgUrl: this.imgaUrls,
        inviteCode: this.state
      };
      addLunbotu(obj)
        .then(response => {
          if (response.data.responseCode === 200) {
            this.$message({
              message: "恭喜你，新增成功！",
              type: "success"
            });
            this.$emit("getData");
            this.hideUpload = false;
            this.addUserDia = false;
          }
        })
        .catch(error => {
          this.$message({
            message: "新增失败！",
            type: "error"
          });
        });
    },
    handPictureChange(file, fileList) {
      this.hideUpload = fileList.length >= 1;
    },
    handleRemove(file, fileList) {
      this.hideUpload = fileList.length >= 1;
    },
    handleIconSuccess(file, fileList) {
      //   console.log(file);
      this.imgaUrls = file.data;
      //   console.log(this.imgaUrls);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    open(flag, content) {
      //  console.log(ast)
      console.log(this.mylist);
      this.value = content;
      this.addUserDia = flag;
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      let obj = {
        type: "公告"
      };
      searchInvite(obj).then(response => {
        if (response.data.responseCode === 200) {
          this.restaurants = response.data.data.list;
        } else {
          this.$message({
            showClose: true,
            message: "错了哦，没找到数据",
            type: "error"
          });
        }
      });
    },
    handleSelect(item) {
      console.log(item);
      this.state = item.inviteCode;
    },
    handleIconClick(ev) {
      console.log(ev);
    }
  },
  mounted() {
    this.loadAll();
  }
};
</script>

<style scoped>
.home {
  width: 100%;
  overflow: auto;
  margin: 0 auto;
}
.inputs {
  width: 100%;
}
.zj {
  width: 100%;
  text-align: center;
  padding-top: 50px;
  margin: 0 auto;
}
.footer {
  width: 100%;
  text-align: center;
  padding-top: 10px;
  margin: 0 auto;
}
</style>

<style>
.hide .el-upload--picture-card {
  display: none;
}
.my-autocomplete li {
  line-height: normal;
  padding: 7px;
}
.my-autocomplete li .name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.my-autocomplete li .addr {
  font-size: 12px;
  color: #b4b4b4;
}

.my-autocomplete li .highlighted .addr {
  color: #ddd;
}
</style>
